<template>
		<div class="card-box">
		<div class="card-enabled-box">
			<!-- 提示启用的框框 -->
			<div class="card-enabled" v-if="tpState === 1"><span>启用</span></div>
			<div class="card-img-box" @mouseover="basicShow" @mouseout="basicHide">
				<img :src="thumbnail" class="card-img">
				<!-- 鼠标hover出现一个蒙层可以点击编辑基本信息 -->
				<div class="card-basic-info" :class="basicState ? 'card-basic-info-active' : ''">
					<span @click="modifyEvent">修改标题</span>
				</div>
			</div>
		</div>
		<div class="card-info">
			<div class="card-title-box" @mouseover="infoShow" @mouseout="infoHide">
				<span class="card-title" :class="infoState ? 'card-title-active' : ''">
					{{name}}({{rid}})
					<div class="arrow-img-box card-title-img" :data-rid="rid">
						<img src="static/image/index-arrow.png" class="layout-img"/>
						<img src="static/image/index-arrow.png" class="default" :class="infoState ? 'default-change' : ''" />
						<img src="static/image/index-arrow-active.png" class="active" :class="infoState ? 'active-change' : ''" />
					</div>
				</span>
				<!-- 鼠标hover标题显示该隐藏区域 -->
				<div class="card-info-hidden" >
					<div class="container" :data-rid="rid">
						<!-- 创建者 -->
						<span title="创建者" class="creater"><i class="icon njfont nj-shouhuoren"></i>{{creater}}</span>
						<!-- 创建时间 -->
						<span title="创建时间" class="create-time"><i class="icon njfont nj-shijian"></i>{{createTime}}</span>
						<!-- 模板描述 -->
						<span title="模板描述" class="des">
							<i class="icon njfont nj-yuyue"></i>
							<span>{{des}}</span>
						</span>
					</div>
				</div>
			</div>
			
			<div class="card-info-time">
				<span class="time">{{updateTime}}</span>
				<div class="handle-box" @mouseover="handleShow" @mouseout="handleHide">
					<span class="handle">操作按钮</span>
					<div class="bg-box" :data-rid="rid" :class="handleState ? 'bg-box-active' : ''">
						<div class="bg-box-move">
							<img src="static/image/index-button-arrow.png" /> 
							<div class="button-box">
								<input type="button" value="启 用" @click="enableClickEvent(tpState)" :class="tpState === 1 ? 'disabled' : ''" />	
								<input type="button" value="编 辑" @click="editEvent" />	
								<input type="button" value="删 除" @click="deleteClickEvent(tpState)" :class="tpState === 1 ? 'disabled' : ''"/>	 
							</div>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		dataItem: {
			type: Object,
			default: () => null
		},
		editEvent: {
			type: Function,
			default: () => {}
		},
		deleteEvent: {
			type: Function,
			default: () => {}
		},
		enableEvent: {
			type: Function,
			default: () => {
				// console.log("启用事件触发了");
			}
		},
		deleteEvent: {
			type: Function,
			default: () => {
				// console.log("启用事件触发了");
			}
		},
		//修改基本信息的事件
		modifyEvent: {
			type: Function,
			default: () => {
				// console.log("启用事件触发了");
			}
		}
	},
	data() {
		return {
			infoState: false,
			handleState: false,
			basicState: false
		};
	},
	computed: {
		rid() {
			if (this.dataItem) {
				return this.dataItem.rid || "";
			}
		},
		creater() {
			if (this.dataItem) {
				return this.dataItem.createUser || "创建人";
			}
		},
		createTime() {
			if (this.dataItem && this.dataItem.createTm) {
				return this.getDate(this.dataItem.createTm);
			} else {
				return new Date().getTime();
			}
		},
		des() {
			if (this.dataItem) {
				return this.dataItem.tpDesc || "模板描述";
			}
		},
		name() {
			if (this.dataItem) {
				return this.dataItem.tpName || "模板名称";
			}
		},
		updateTime() {
			if (this.dataItem && this.dataItem.updateTm) {
				return this.getDate(this.dataItem.updateTm);
			} else {
				return this.getDate(this.createTime);
			}
		},
		//启用状态
		tpState() {
			if (this.dataItem) {
				// console.log(this.dataItem.tpState, "this.dataItem.tpState");
				return this.dataItem.tpState || 0;
			} 
		},
		thumbnail() {
			if (this.dataItem) {
				// console.log(this.dataItem.tpState, "this.dataItem.tpState");
				return this.dataItem.tpThumbNail || "static/image/thumbnail.jpg";
			} 
		}

	},
	components: {},
	created() {},
	mounted() {},
	filters: {

	},
	methods: {
		//将时间戳格式化返回
		getDate(time) {
			if (!time) {
				return "创建时间";
			}
			let date = new Date(time);
			return `${date.getFullYear()}-${date.getMonth() + 1 > 9 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1)}-${date.getDate() > 9 ? date.getDate() : "0" + date.getDate()} ${date.getHours() > 9 ? date.getHours() : "0" + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes()}`;
		},
		//是否显示隐藏的区域
		infoShow() {
			// console.log("鼠标移入");
			this.infoState = true;
			let dom = document.querySelector(`.container[data-rid="${this.rid}"]`);
			let h = getComputedStyle(dom, null).height;
			dom.parentNode.style.height = h;
			dom.parentNode.style.opacity = "1";
			
		},
		infoHide() {
			// console.log("鼠标移移出");
			this.infoState = false;
			let dom = document.querySelector(`.container[data-rid="${this.rid}"]`);
			dom.parentNode.style.height = "0";
			dom.parentNode.style.opacity = "0";
		},
		//鼠标移入操作按钮
		handleShow() {
			// return;
			this.handleState = true;
		},
		handleHide() {
			// return;

			this.handleState = false;
			
		},
		basicShow() {
			this.basicState = true;
		},
		basicHide() {
			this.basicState = false;
		},
		//启用事件，判断是否可以点击
		enableClickEvent(tpState) {
			// console.log(tpState);
			(tpState === 0) && this.enableEvent();
		},
		//删除事件，判断是否可以点击
		deleteClickEvent(tpState) {
			(tpState === 0) && this.deleteEvent();
		},
		//编辑基本信息
		modifyBasicInfo() {

		}
		
	}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.card-box {
	width: 270px;
	height: fit-content;
	border-radius: 5px;
	box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
	background: #fff;
	margin: 40px;
	font-size: 14px;
	margin-top: 20px;
}
.card-enabled-box {
	width: 100%;
	position: relative;
	overflow: hidden;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
/* 提示已启用的框框的样式 */
.card-enabled {
	position: absolute;
	right: 2px;
	top: 12px;
	background: #13ce66;
	color: #fff;font-size: 12px;
	width: 60px;
    height: 35px;
    transform: rotate(45deg) translateY(-32px);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
}
.card-enabled span {
	position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.card-img-box {
	width: 100%;
	height: 270px;
	overflow: hidden;
	border-bottom: 1px solid #f1f1f1;
}
.card-img {
	/* height: 600px; */
	width: 100%;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.card-basic-info {
    width: 100%;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
	background: #fff;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.6);
	transition: opacity 0.3s ease-in;
	opacity: 0;
	display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.card-basic-info-active {
	height: 270px;
	opacity: 1;
}
.card-basic-info {
	font-size: 16px;
    cursor: pointer;
    font-family: "微软雅黑";
}

.card-info-time {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 30px;
	margin: 15px 0;
	/* margin-bottom: 15px; */
}

.card-info {
	padding: 0 15px;
	line-height: 14px;
	/* height: 14px; */
	box-sizing: border-box;
	width: 100%;
}

.card-title {
	padding: 15px 0;
	display: flex;
	text-align: left;
	align-items: center;
	transition: color 0.3s;
	cursor: pointer;
}
.card-title-active {
	color: #409eff;
}

.card-info-time {
	line-height: 14px;
	height: 14px;
}
/* 操作按钮的样式 */
.card-info-time .handle-box {
	position: relative;

}
.card-info-time .handle {
	color: #409eff;
	cursor: pointer;
}
.card-info-time .bg-box {
	cursor: pointer;
	position: absolute;
	left: 0; 
	top: 0; 
	overflow: hidden;
	padding: 15px;
	padding-top: 0;
    box-sizing: content-box;
    width: 100%;
    margin-left: -15px;
	height: 0;
	transition: all 0.3s;
	z-index: 10;
}
.card-info-time .bg-box-active {
	height: 136px;
}

.card-info-time .bg-box-move {
	margin-top: 15px; 
}
.card-info-time .bg-box img {
	width: 20px;
    transform: translateY(2px);
    margin-left: 8px;
}
.card-info-time .bg-box-arrow {
	width: 10px;
	height: 10px;
	background: #fff;
	border: 1px solid #e6ebf5;
}
.card-info-time .button-box {
	border: 1px solid #e6ebf5;
	border-radius: 4px;
	box-shadow: 0 2px 12px 0 rgba(0, 0 ,0, .1);
	padding: 8px 0;
	background: #fff;
}
.card-info-time .button-box input {
	border: 0;
	height: 36px;
	outline: none;
	line-height: 36px;
	background: #fff; 
	color: #444;
	width: 100%;
	cursor: pointer;
	transition: all 0.2s;
}
 .card-info-time .button-box .disabled {
	cursor: not-allowed;
	background: #ddd;
	border-radius: 0;
	opacity: 0.2;
} 
 .card-info-time .button-box .disabled:hover {
	background: #ddd;
	color: #444;
	opacity: 0.2;
} 
 .card-info-time .button-box input:hover {
	background-color: #ecf5ff;
    color: #66b1ff;
} 

.card-info-time .time {
	font-size: 13px;
	color: #999;
}
.card-info-hidden {
	transition: height 0.5s, opacity 0.3s, margin-bottom, 0.5s;
	height: 0;
	overflow: hidden;
	padding: 0 5px;
}
.card-info-hidden span {
	display: block;
	text-align: left;
	line-height: 20px;
	/* height: 20px; */
}
.card-info-hidden span i {
	font-size: 14px !important;
	margin-right: 5px;
}
.card-info-hidden .des {
	display: flex;
	align-items: baseline;
}
.card-info-active {
	height: 80px;
}
/* 向下的箭头的样式 */
.arrow-img-box {
	margin-left: 10px;
	/* width: 12px; */
	position: relative;
}
.arrow-img-box img {
	width: 12px;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(180deg);
	transition: all 0.3s;
}
.arrow-img-box .default {
	opacity: 1;
}
.arrow-img-box .default-change {
	transform: rotate(360deg);
	opacity: 0;
}
.arrow-img-box .active {
	opacity: 0;
}
.arrow-img-box .active-change {
	transform: rotate(360deg);
	opacity: 1;
}
.arrow-img-box .layout-img {
	position: unset;
	visibility: hidden;
}

/* 按钮框框 */
</style>

